* {
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
}

html, body {
    width: 100%;
    height: 100%;
}
.shade{
    width:100%;
    height:100%;
    background:#ddd;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    display:none;
}
#index {
    width: 100%;
    height: 100%;
    background: #F7836D;
    position: relative;
    z-index: 10;
}

#leftP {
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #f94b4b;

}
#leftPage {
    width: 70%;
    height: 100%;
    background: lightgoldenrodyellow;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-20%);
}

.moveRight {
     transform: translateX(70%);
     transition: 0.5s;
 }
.moveLeft {
    transform: translateX(0);
    transition: 0.5s;
}
 .moveR {
     transform: translateX(0%)!important;
     transition: 0.5s;
 }
 .moveL {
    transform: translateX(-20%)!important;
    transition: 0.5s;
}
 #count{
     margin-top:20px;
 }
 #count li{
     width:100%;
     border-bottom:1px solid #eee;
     height:40px;
     line-height:40px;
 }
